<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <div class="Mall4j list page-list group-buy">
    <div class="content">
      <div class="list-banner">
        <img
          src="@/assets/images/group-banner.jpg"
          alt
        >
      </div>
      <div class="goods-list group-list">
        <prod-item
          :is-loaded="isLoaded"
          :pale-list="teamBuyingList"
          :list-type="1"
          @update-pic-indext="updatePicIndext"
        />

        <!-- 页码 -->
        <pagination
          v-model="current"
          :pages="pages"
          @change-page="getTeamBuyingList"
        />
        <!-- /页码 -->
      </div>
    </div>
  </div>
</template>

<script setup>

// 过渡效果设置
const style = document.createElement('style')
const cssText = 'a{-webkit-transition: all .2s ease;-moz-transition: all .2s ease;-ms-transition: all .2s ease;-o-transition: all .2s ease;transition: all .2s ease;}'
style.innerHTML = cssText
const head = document.getElementsByTagName('head')[0]
head.appendChild(style)

const route = useRoute()

const current = ref(route.query.current || 1) // 当前页数
onMounted(() => {
  // 设置网页标题
  document.title = $t('commonHead.groupDiscount')
  getTeamBuyingList(current.value) // 团购列表
})

const isLoaded = ref(false)
const teamBuyingList = ref([]) // 团购列表
const pages = ref(0) // 总页数
/**
 * 请求团购列表
 */
const getTeamBuyingList = (current) => {
  isLoaded.value = false
  http.get('/search/page', {
    params: {
      current,
      size: 12,
      prodType: 1,
      isActive: 1 // 过滤掉活动商品
    }
  }).then(({ data }) => {
    isLoaded.value = true
    teamBuyingList.value = data.records[0].products
    teamBuyingList.value = teamBuyingList.value.map(item => Object.assign(item, { imgs: item.imgs.split(','), currentActive: 0 }))
    pages.value = data.pages
  })
}

/**
 * 用于更新子组件中列表每个商品当前图片索引，比较抽象
 */
const updatePicIndext = (index, newValue) => {
  teamBuyingList.value[index].currentActive = newValue
}
</script>

<style lang="scss" scoped>
@use "../list/index";
</style>
